<template>
  <div class="box">
    <h3>演示辅助函数,{{ num }}</h3>
    <el-button type="primary" size="default" @click="handlePlus"
      >辅助函数触发数字+</el-button
    >
    <el-button type="primary" size="default" @click="handleMinu"
      >辅助函数触发数字-</el-button
    >
    <div v-for="item in filterGoods">
      商品名称{{ item.name }} 价格{{ item.price }}
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import { myMapMutations } from "./my-map";
export default {
  computed: {
    ...mapState({
      num: (state) => state.counter.num,
    }),
    ...mapGetters({
      filterGoods: "goods/filterGoods",
    }),
  },
  methods: {
    // 方法1：单独触发mutations
    // handlePlus: function () {
    //   this.$store.commit("counter/increment");
    // },
    // handleMinu: function () {
    //   this.$store.commit("counter/decrement");
    // },
    // 方法2：使用辅助函数触发mutations
    ...mapMutations({
      handlePlus: "counter/increment",
      handleMinu: "counter/decrement",
    }),
    // 方法3：分析mapMutations原理 【了解】
    // ...myMapMutations({
    //   handlePlus: "counter/increment",
    //   handleMinu: "counter/decrement",
    // }),
    ...mapActions({
      initCategory: "category/categoryAct",
    }),
  },
  created() {
    this.initCategory();
  },
};
</script>

<style lang="scss" scoped>
.box {
  border: 1px solid #333;
  height: 500px;
  width: 50%;
}
</style>
